<docs>
  ## 可办理日期选择
  ## props
  * list 内容列表
  * value { date, period } 日期和时段（日期为：20171127，时段为：上午，下午）
</docs>
<template>
  <div class="date">
    <p class="title">选择办理日期</p>
    <table class="table">
      <tr class="table-th-wrap">
        <th v-for="(item, index) in list"
         class="th"
        :key="index">{{item.rq}}</th>
      </tr>
      <tr class="table-td-wrap">
        <td v-for="(item, index) in list" class="td"
        @click="dateChoice(item,AM)"
        :key="index" :class="tdClass(item, AM)">
          <p>{{AM}}</p>
          <p class="text">{{item.sfyyy_am == '1' ? '已选定' :state(item.swys) ? `余${item.swys}`: '约满'}}</p>
        </td>
      </tr>
      <tr class="table-td">
        <td v-for="(item, index) in list" class="td"
        @click="dateChoice(item,PM)"
        :key="index" :class="tdClass(item, PM)">
          <p>{{PM}}</p>
          <p class="text">{{item.sfyyy_pm == '1' ? '已选定' :state(item.xwys) ? `余${item.xwys}`: '约满'}}</p>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: 'dateSelect',
  props: {
    list: {
      type: Array,
      required: true
    },
    value: {
      type: Object
    }
  },
  data() {
    return {
      AM: '上午',
      PM: '下午',
      options: [
        {
          key: '上午',
          val: 'swys'
        },
        {
          key: '下午',
          val: 'xwys'
        }
      ]
    };
  },
  mounted(){
    // console.log(this.value);
  },
  methods: {
    // 判断预定状态
    state(num) {
      return parseInt(num, 10) > 0;
    },
    // td对应的不同class
    tdClass(item, type) {
      let className;
      const flag = this.options.find(ele => ele.key === type).val;
      const val = this.value;
      if (parseInt(item[flag], 10) <= 0 || (item.sfyyy_am == '1' && '上午' === type) || (item.sfyyy_pm == '1' && '下午' === type)) {
        className = 'disabled';
      } else {
        className = val.date === item.rqcs && val.period === type ? 'normal active' : 'normal';
      }
      return className;
    },
    // 日期选择确定
    dateChoice(item, type) {

      const flag = this.options.find(ele => ele.key === type).val;
      if (parseInt(item[flag], 10) > 0) {
        this.$emit('input', {
          period: type,
          date: item.rqcs
        });
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/variable.scss';
.date {
  // margin-top: $margin-base;
  // border: $border;
  background-color: #fff;
  padding-bottom: $padding-base;
  padding-right: $padding-base;
  .title {
    font-size: $font-size-large;
    line-height: 1;
    padding: $padding-base;
    color: $color-text-title;
  }
  .table {
    border-collapse: separate;
    border-top: $border;
    border-bottom: $border;
    width: 100%;
    text-align: center;
    .th {
      text-align: center;
      line-height: 1;
      border: $border;
      padding: 28px 0;
    }
    .table-th-wrap {
      font-size: $font-size-base;
    }
    .td {
      padding: 28px 0;
      line-height: 1.5;
      border: $border;
      position: relative;
      font-size: $font-size-small;
    }
    .disabled {
      background-color: $color-disabled;
      .text {
        color: $color-error;
      }
    }
    .normal {
      transition: $transition;
      .text {
        color: $color-success;
      }
    }
    .active {
      border-color: $color-success;
    }
    .normal:after {
      transition: $transition;
      content: '\e60a';
      font-family: 'icomoon';
      position: absolute;
      bottom: 13px;
      right: 13px;
      color: transparent;
    }
    .active:after{
      color: $color-success;
    }
  }

}
</style>
